<template>
  <a-modal
    title="数据详情"
    :visible="infoVisible"
    ok-text="确定"
    cancel-text="取消"
    :destroy-on-close="true"
    :width="currentInfo.length === 0 ? '30%' : '60%'"
    centered
    @ok.stop="closePreview"
    @cancel.stop="closePreview"
  >
    <div class="node-preview-modal">
      <div v-if="currentInfo.length === 0" class="data-empty-status">
        <img alt="" src="@/assets/view/empty3.png" />
        <p>暂无数据</p>
      </div>
      <div
        v-for="(infoItem, index) in currentInfo"
        :key="'preview' + index"
        class="container"
      >
        <div class="title">
          <h1>{{ infoItem.name }}</h1>
        </div>
        <div class="infos">
          <span v-if="infoItem.size">大小：{{ infoItem.size }}</span>
          <span>行数：{{ infoItem.count }}</span>
          <span v-if="infoItem.owner">拥有者：{{ infoItem.owner }}</span>
          <span>创建时间：{{ infoItem.createTime }}</span>
        </div>
        <div class="data-table">
          <data-preview-table
            :head="infoItem ? infoItem.head : []"
            :data="infoItem ? infoItem.data : []"
            data-type="table"
          />
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts">
/**
 * preview of single dataset
 * @author Huihua Lu
 */
import { Component, Vue, Prop } from 'vue-property-decorator'
import DataPreviewTable from '@/components/studio/data/panel/DataPreviewTable.vue'

@Component({
  components: {
    DataPreviewTable,
  },
})
export default class NodeDataPreview extends Vue {
  @Prop() currentInfo!: Array<any>
  @Prop() infoVisible!: boolean

  public closePreview() {
    this.$emit('close-preview')
  }
}
</script>

<style lang="less" scoped>
/* 算子节点数据预览 */
.node-preview-modal {
  max-height: 60vh;
  overflow-y: auto;

  .data-empty-status {
    align-items: center;
    color: rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.infos {
  margin-bottom: 12px;

  span {
    margin-right: 20px;
  }
}
</style>
